import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {FlatGrid, SectionGrid} from 'react-native-super-grid';

// import Pages from './pages';
// import WxBus from './WxBus';
import SvgErm from './erm.svg';
import SvgDemo from './demo.svg';
import SvgWxBus from './wxbus.svg';
import SvgDingDing from './dingding.svg';
import SvgAlipay from './alipay.svg';
import SvgTaobao from './taobao.svg';
import SvgJingdong from './jingdong.svg';
import SvgOPlayer from './oplayer.svg';

export default ({navigation}) => {
  const [items, setItems] = React.useState([
    {name: 'Erm', code: '#f3f3f3', icon: <SvgErm />, href: 'ERM'},
    {name: '常用功能', code: '#f3f3f3', icon: <SvgDemo />, href: 'Normal'},
    {
      name: '仿企业微信导航',
      code: '#f3f3f3',
      icon: <SvgWxBus />,
      href: 'WxBus',
    },
    // {name: '仿钉钉', code: '#f3f3f3', icon: <SvgDingDing />, href: 'DingDing'},
    // {name: '仿支付宝', code: '#f3f3f3', icon: <SvgAlipay />, href: 'Alipay'},
    // {name: '仿淘宝', code: '#f3f3f3', icon: <SvgTaobao />, href: 'Taobao'},
    // {name: '仿京东', code: '#f3f3f3', icon: <SvgJingdong />, href: 'Jingdong'},
    {name: 'OPlayer', code: '#f3f3f3', icon: <SvgOPlayer />, href: 'OPlayer'},
    // {name: 'V1.0.0', code: '#f3f3f3', icon: <Text>图标</Text>, href: 'Jingdong'},
  ]);

  return (
    <FlatGrid
      itemDimension={130}
      data={items}
      style={styles.gridView}
      spacing={10}
      renderItem={({item}) => (
        <TouchableOpacity
          onPress={() => {
            navigation.navigate(item.href);
          }}>
          <View style={[styles.itemContainer, {backgroundColor: item.code}]}>
            {item.icon}
            <Text style={styles.itemName}>{item.name}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  );
};

const styles = StyleSheet.create({
  gridView: {
    marginTop: 10,
    flex: 1,
    backgroundColor: '#fff',
  },
  itemContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,
    padding: 10,
    height: 150,
  },
  itemName: {
    fontSize: 16,
    color: '#333333',
    fontWeight: '600',
    marginTop: 10,
  },
});
